.date-picker {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 250px;
  border: 1px solid #ccc;
}

.scroll-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.scroll-container .wrapper {
  overflow-y: auto;
  height: 250px;
  /* 实现来捕捉滚动内部的子项元素，
  并强制性对`y`进行监控，
  类似`swiper`中左右滑动一定距离
  的吸附归位动画功能。 */
  scroll-snap-type: y mandatory;
}

.wrapper .item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  /* 自动吸附归位动画 */
  scroll-snap-align: center;
  color: #000;
}

/* 去掉滚动条 */
::-webkit-scrollbar {
  display: none;
}

/* 中间选中盒子 */
.target-center {
  position: absolute;
  top: 100px;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 50px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  /* 背景渐变 */
  background-image: linear-gradient(
    /* 纵轴180度 */ 180deg,
    /* 
    hsla(色相, 饱和度, 亮度, 透明度)
    */ hsla(0, 0%, 100%, 1),
    hsla(0, 0%, 100%, 0.8),
    hsla(0, 0%, 100%, 0),
    hsla(0, 0%, 100%, 0.8),
    hsla(0, 0%, 100%, 1)
  );
  pointer-events: none;
}
